<template>
    <div class="ts-header">
      <div>
          <span>Tiger Song</span>
      </div>
      <div style="-webkit-app-region: no-drag;">
          <el-button title="最小化" @click="minimize()" link type="primary">
              最小化
          </el-button>
          <el-button title="最大化" v-if="!isMaximized" @click="maximize()" link type="primary">
              最大化
          </el-button>
          <el-button title="还原" v-else @click="maximize()" link type="primary">
              还原
          </el-button>
          <el-button title="退出" @click="close()" link type="primary">
              退出
          </el-button>
      </div>
    </div>
  </template>
   
  <script lang="ts">
  import {defineComponent, onMounted, reactive, toRefs} from "vue";
  import 'element-plus/es/components/button/style/css'
  import { ElButton } from 'element-plus'
  export default defineComponent({
      name: 'Header',
      components: {
          ElButton
      },
      setup() {
   
          // @ts-ignore
          const remote = require("@electron/remote");
          const win = remote.getCurrentWindow()
   
          const state = reactive({
              isMaximized: false
          })
   
          const minimize = () => {
              win.minimize()
          }
   
          const maximize = () => {
              if (win.isMaximized()) {
                  state.isMaximized = false
                  win.restore()
              } else {
                  state.isMaximized = true
                  win.maximize()
              }
          }
   
          const close = () => {
              win.close()
          }
   
          onMounted(() => {
              state.isMaximized = remote.getCurrentWindow().isMaximized()
          })
   
          return {
              ...toRefs(state),
              minimize,
              maximize,
              close,
          }
      }
  })
  </script>
   
  <style>
  .ts-header {
      moz-user-select: -moz-none;
      -moz-user-select: none;
      -o-user-select:none;
      -khtml-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      user-select:none;
      -webkit-app-region: drag;
      background-color: #2b2b2b;
      color: white!important;
      font-size: 14px;
      padding: 0 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
  }
  </style>